<template>
  <div class="box-card" shadow="never">
    <el-table max-height="600" ref="table" v-loading="crud.loading" :data="crud.data[crud.listName]"
      :header-cell-style="{ background: '#c8e2ff' }" @selection-change="selectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column label="序号" width="60px" prop="indexNumber">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="chargeStates" label="收费">
        <template slot-scope="scope">
          <span :class="scope.row.chargeStates == 0 ? 'red' : ''">
            {{
              scope.row.chargeStates == 0
                ? "未收费"
                : scope.row.chargeStates == 1
                  ? "已收费"
                  : ""
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="exeStates" label="状态">
        <template slot-scope="scope">
          <span :class="scope.row.exeStates == 0 ? 'red' : ''">
            {{
              scope.row.exeStates == 0
                ? "未执行"
                : scope.row.exeStates == 1
                  ? "已执行"
                  : ""
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="reservationTime" label="预约时间">
        <template slot-scope="scope">
          {{ getTime(scope.row.reservationTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="reservationDoctor" label="预约医生" />
      <el-table-column prop="exeTime" label="执行时间">
        <template slot-scope="scope">
          {{ getTime(scope.row.exeTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="exeDoctor" label="执行医生" />
    </el-table>
    <pagination :showJumper="true" />
  </div>
</template>

<script>
import CRUD, { presenter, header, form, crud } from "@crud/crud";
import pagination from "@crud/Pagination";
import moment from "moment";

const defaultForm = {
  aid: null,
  patientId: null,
};
export default {
  name: "appRight",
  components: { pagination },
  cruds() {
    return CRUD({
      url: "admin/reservation/treatment/exe/list",
      optShow: {
        reset: false,
        add: false,
        edit: false,
        del: false,
        download: false,
        opts: false,
      },
      queryOnPresenterCreated: false,
      idField: "patientId",
    });
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  props: {
    activeRow: {
      type: Object,
      default: null,
    },
    activeRow2: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {};
  },
  watch: {
    activeRow2: function (val) {
      if (val) {
        this.crud.defaultForm.patientId = this.$props.activeRow.patientId;
        this.crud.defaultForm.adviceId = val ? val.adviceId : "";
        this.crud.params.patientId = this.$props.activeRow.patientId;
        this.crud.params.adviceId = val ? val.adviceId : "";
        this.$nextTick(() => {
          this.crud.toQuery();
        });
      }
    },
  },
  methods: {
    selectionChange(selection) {
      this.$listeners.setSelectKeys(selection);
    },
    getTime(val) {
      return val ? moment(val).format("MM-DD HH:mm") : "";
    },
  },
};
</script>

<style lang="scss" scoped>
.box-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  box-shadow: -3px 0px 5px #00000059;
}

/deep/.crud-opts {
  display: inline-flex;
}

/deep/.el-table {
  overflow: auto;
}

.table_title {
  display: inline-block;
  line-height: 30px;
  margin: 0 10px 0 0;
  vertical-align: middle;
  font-weight: bold;
  color: #303133;
  font-size: 15px;
}

.head-container {
  padding-bottom: 0;

  /deep/.filter-item {
    margin-bottom: 0;
  }
}

.red {
  color: #a30014fe;
}

/deep/.el-pagination .el-select .el-input .el-input__inner {
  height: 22px;
}
</style>
